<template>
<div class="head-wrapper">
  <div class="head-container">
    <div class="container-main clear-fix">
      <div class="logo">
        <h1>福建国科信息科技有限公司</h1>
        <h2>IT领域教产融合运营服务专家</h2>
        <a class="logo-img-wrapper" href="javascript:;" @click="goto('index')">
          <img class="logo-img" src="/img/head/LOGO.png" alt="国科科技">
        </a>
      </div>
      <div class="navigation">
        <div @click="goto('index')" :class="{activat: itemActive == 'index'}">首页</div>
        <div :class="{activat: (itemActive == 'service-introdution'|| itemActive == 'service-case' || itemActive=='service-detail-id')}">
          <span @click="goto('service-introdution')" >项目服务</span>
          <ul class="service-dropdown">
            <li @click="goto('service-introdution')" >业务介绍</li>
            <li @click="goto('service-case')" >服务案例</li>
            <li @click="goto('talents-base')" >厦门人才基地</li>
          </ul>
        </div>
        <div :class="{activat: (itemActive == 'develop-introdution'||itemActive == 'develop-case' || itemActive=='develop-detail-id')}">
          <span @click="goto('develop-introdution')">软件研发</span>
          <ul class="develop-dropdown">
            <li @click="goto('develop-introdution')" >业务介绍</li>
            <li @click="goto('develop-case')" >研发案例</li>
          </ul>
        </div>
        <div :class="{activat: (itemActive == 'college-intro'||itemActive == 'college-ICT_train'||itemActive == 'college-software_train'||itemActive == 'college-company'
        ||itemActive == 'college-teacher'||itemActive == 'college-get_job' ||itemActive == 'college-ict_flow' || itemActive == 'college-software_flow' || itemActive == 'college-information')}">
          <span @click="goto('college-intro')" >国科教育</span>
          <ul class="college-dropdown">
            <li @click="goto('college-intro')" >简介</li>
            <li @click="goto('college-ICT_train')" >ICT培训</li>
            <li @click="goto('college-software_train')" >软件培训</li>
            <li @click="goto('college-information')" >信息安全</li>
            <li @click="goto('college-company')" >企业定制</li>
            <li @click="goto('college-teacher')" >师资实力</li>
            <li @click="goto('college-get_job')" >就业情况</li>
            <li @click="goto('college-blank')" >官方网站</li>
          </ul>
        </div>
        <div :class="{activat: (itemActive == 'industry' || itemActive == 'about-goktech' || itemActive == 'about-teamwork' || itemActive == 'about-news' || itemActive == 'about-contact'|| itemActive == 'about-detail-id')}">
          <span @click="goto('about-goktech')">关于国科</span>
          <ul class="about-dropdown">
            <li @click="goto('about-goktech')" >公司简介</li>
            <li @click="goto('about-teamwork')" >合作资质</li>
            <li @click="goto('about-news')" >最新动态</li>
            <li @click="goto('about-contact')" >联系我们</li>
            <li @click="goto('industry')" >产学合作</li>
          </ul>
        </div>
        <div :class="{activat: (itemActive == 'jobs-list-id' || itemActive == 'jobs-detail')}">
          <span @click="goto('/jobs/list',jobsList[0] && jobsList[0].id)">诚聘英才</span>
          <ul class="jobs-dropdown">
            <li v-for="(item,key) in jobsList" :key="key" @click="goto('/jobs/list',item.id)">
              {{item.deptname}}
            </li>
              <!-- <li @click="goto('/jobs/list',1)">国科教育</li>
              <li @click="goto('/jobs/list',2)">软件项目中心</li>
              <li @click="goto('/jobs/list',3)">ICT项目中心</li>
              <li @click="goto('/jobs/list',4)">企业市场部</li>
              <li @click="goto('/jobs/list',5)">教学市场部</li>
              <li @click="goto('/jobs/list',6)">人力资源部</li>
              <li @click="goto('/jobs/list',7)">软件研发部</li> -->
          </ul>
        </div>
        <!-- <div>
          <a class="guest-service" href="http://www.jikeserv.com/" target="_blank">集客服务</a>
        </div> -->
        <div :class="{activat: (itemActive == 'informationSave')}">
          <span @click="goto('informationSave')">信安宣传周</span>
        </div>
        <div>
          <!-- <a class="guest-service" href="https://campus.goktech.cn/screenHome" target="_blank">数据大屏</a> -->
          <a class="guest-service" href="javascript:;" @click="goto('epidemicPrevention')">疫情防控</a>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {firstDeptTdeptList} from '@/api/getData'
export default {
  name: 'vhead',
  data () {
    return{
      itemActive: 'home',
      jobsList: []
    }
  },
  created() {
  },
  mounted(){
    firstDeptTdeptList.call(this).then(res=>{
      this.jobsList = res
    })
    this.itemActive = this.$route.name
    // console.log(this.$router.name)
  },
  methods: {
    goto (routeName,que){
      if(routeName === 'college-blank'){
        window.open('https://campus.goktech.cn/','_blank')
        return
      }
      if(routeName === 'talents-base'){ // 厦门人才基地跳转
        const { href } = this.$router.resolve({
          path: '/talents/teaching'
        });
        window.open(href, '_blank');
        return
      }
      if(que){
        this.$router.push({
          path: `${routeName}/${que}`
        })
      }else{
        this.$router.push({
          name: routeName
        })
      }
      this.itemActive = routeName
      // console.log(this.itemActive)
    },
    reloadNav(){
      let wtop = document.documentElement.scrollTop||document.body.scrollTop;
      let nav = document.getElementsByClassName("main-nav")
      let pageItem = document.getElementsByClassName("page-item-container")
      if(pageItem.length==0){
      return
      }
      if( wtop >=174) {
      pageItem[0].className="page-item-container fixed-page-item";
      }else{
      pageItem[0].className="page-item-container absolute-page-item";
      }
      if(nav.length==0){
      return
      }
      if( wtop >=244) {
      nav[0].className="main-nav fixed-nav";
      }else{
      nav[0].className="main-nav";
      }
    }
  },
  watch: {
    $route(to,from){
      this.itemActive = this.$route.name
      // console.log(this.$route)
      // this.reloadNav()
    }
  }
}
</script>

<style lang="stylus" scoped>

.head-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:58px;
  background:rgba(30,30,30,1);
  color #fff;
  position: fixed;
  top: 0;
  z-index: 999;
  .container-main{
    // @extend .clear-fix;
    width: 1314px;
    margin: auto;

     @media (min-width: 1640px){
       width: 1480px;
      }
      // logo栏
    .logo{
      position: relative;
      float: left;
      width: 361px;
      height: 36px;
      h1,h2{
        position: absolute;
        top: 0;
        font-size: 10px;
        color: transparent;
        z-index: -2000;
      }
      .logo-img{
        width: 100%;
        margin-top: 11px;
      }
    }
  }

}
// 页头导航栏
.navigation{
  float: right;
  >div{
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    width:88px;
    line-height: 58px;
    text-align: center;
    margin-right: 10px;
    font-size:14px;
    font-family:MicrosoftYaHei;
    color:rgba(130,130,130,1);
    position: relative;
    span{
      display: block;
    }
    &:hover{
      background:rgba(20,87,253,1);
      font-weight:bold;
      color:rgba(255,255,255,1);
    }
    &:hover ul{
      display: block;
    }
    .guest-service{
      display: block;
      width: 100%;
      height 100%;
      text-decoration: none;
      color:rgba(130,130,130,1);
      &:hover{
        background:rgba(20,87,253,1);
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
    }
  }
  ul{
    padding: 10px 0;
    display: none;
    position: absolute;
    top: 58px;
    background:rgba(30,30,30,1);
    width: 176px;
    box-shadow:0px 6px 17px 4px rgba(0,0,0,0.24);
    li{
      color:rgba(255,255,255,1);
      font-weight: normal;
      padding-left: 40px;
      line-height: 44px;
      font-size: 14px;
      text-align: left;
      &:hover{
        background:rgba(20,87,253,1);
      }
    }
  }
}
.navigation .activat{
  background:rgba(20,87,253,1);
  font-weight:bold;
  color:rgba(255,255,255,1);
}
</style>
